/*
 * 用户列表
 * @Author: ljb
 * @Date: 2018-04-20 17:38:08
 * @Last Modified by: ljb
 * @Last Modified time: 2019-05-05 14:15:06
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-customer-skin-test-index">

		<Table
			v-if="Object.keys(wechatUsers).length > 0"
			:columns="columns"
			:loading="loading"
			:height="height"
			:data="wechatUsers"
			border />
		<Table
			v-else
			:columns="columns"
			:loading="loading"
			:data="wechatUsers"
			border />

	</div>
</template>

<script>

import Button from 'iview/src/components/button';

export default {
	name: 'WechatUserIndex',
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		wechatUsers: {
			type: Array,
			default() {
				return [];
			},
		},
		height: {
			type: Number,
			default() {
				return 580;
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('skin_test.nickname'),
					key: 'nickname',
					align: 'center',
					render: (h, { row }) => <div> { row.nickname || '-' } </div>,
				},

				{
					title: this.$t('skin_test.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},

				{
					title: this.$t('skin_test.phone'),
					key: 'phone',
					align: 'center',
					render: (h, { row }) => <div> { row.phone || '-' } </div>,
				},
				{
					title: this.$t('skin_test.gender'),
					key: 'sex',
					align: 'center',
					render: (h, { row }) => <div> { this.showGender(row.sex) } </div>,
				},
				{
					title: this.$t('skin_test.province'),
					key: 'province',
					align: 'center',
					render: (h, { row }) => <div> { row.province || '-' } </div>,
				},
				{
					title: this.$t('skin_test.city'),
					key: 'city',
					align: 'center',
					render: (h, { row }) => <div> { row.city || '未知' } </div>,
				},
				{
					title: this.$t('skin_test.country'),
					key: 'country',
					align: 'center',
					render: (h, { row }) => <div> { row.country || '未知' } </div>,
				},
				{
					title: this.$t('skin_test.avatar'),
					key: 'headimgurl',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.headimgurl
								? <img src={ row.headimgurl } alt="无" width="50%"/>
								: this.this.$t('common.none')
						}
					</div>,
				},
				{
					title: this.$t('skin_test.born_at'),
					key: 'born_at',
					align: 'center',
					render: (h, { row }) => <div> { row.born_at ? row.born_at.split(' ').shift() : '未知' } </div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>
							<Button name="index__view" size="small" on-click={() => { this.$emit('show', row); }} type="primary">肤质检测数据</Button>
						</div>),
				},
			],
		};
	},
	methods: {

		/**
         * 性别展示
         * @param  {string} sex {性别}
         * @return {string} {性别展示}
         */
		showGender(sex) {
			switch (parseInt(sex, 10)) {
			case 1:

				return this.$t('skin_test.male');

			case 2:

				return this.$t('skin_test.female');

			default:

				return this.$t('skin_test.unknown');
			}
		},

	},
};
</script>
